<template>
	<public-view navType="other" navTitle="礼品详情">
		<view class="content">
			<my-swiper swiperType="2" :list="gift_info.images"></my-swiper>
			<view class="store-info-box">
				<!-- <block v-for="(item, index) in gift_info?.merchants" :key="index">
					<view class="title-box flex a-i-c j-c-b" @click="goTo({url:'/pages/store/index?id='+item.id})">
						<view class="left flex a-i-c f-s-30 color-333">
							<image class="icon" src="@/static/images/my/gift-store-icon.svg" mode=""></image>
							{{item?.name||""}}
						</view>
						<view class="right flex a-i-c f-s-28 color-333">
							进入店铺
							<image class="icon" src="@/static/images/my/go-store-next.svg" mode=""></image>
						</view>
					</view>
				</block> -->
				<view class="jianjie-box w-100 f-s-36 color-333 f-w-b">
					{{gift_info.name||""}}
				</view>
				<!-- <view class="store-tags-box flex f-w-w">
					<view class="item color-EE8300 f-s-24">
						商品标签商品标签商
					</view>
					<view class="item color-EE8300 f-s-24">
						商品标签
					</view>
				</view> -->
			</view>
			<view class="shop-image-info-box">
				<rich-text :nodes="gift_info.details"></rich-text>
				<!-- <view class="image">
					
				</view> -->
			</view>
			<bottom-button @click="submitGet" v-if="gift_info.status !==1">免费领取</bottom-button>
			<bottom-button v-else>已领取</bottom-button>
			<uni-popup type="center" ref="getSuccess">
				<image class="get-success" src="@/static/images/my/get-success-image.svg" mode=""></image>
			</uni-popup>
		</view>
	</public-view>
	
</template>

<script>
	import swiper from "@/components/myComponents/swiper.vue"
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"my-swiper":swiper,
			"bottom-button":bottomBtn
		},
		data() {
			return {
				list:[1,1,1,1],
				gift_id:"",
				gift_info:{}
			};
		},
		onLoad(e) {
			this.gift_id = e.id
			this.getGiftInfo()
		},
		methods:{
			goTo,
			getGiftInfo(){
				let that = this
				that.util.postRequest({
					url:"v1/goods_gift/info",
					data:{
						id:that.gift_id
					}
				}).then(res=>{
					console.log(res)
					Object.freeze((that.gift_info = res.data)) 
				})
			},
			submitGet(e){
				console.log(e)
				let that = this
				if(that.gift_info.stock<=0){
					uni.showToast({
						title:"礼品库存不足，领取失败",
						icon:"none"
					})
					return
				}
				that.util.postRequest({
					url:"v1/goods_gift_user/add",
					data:{
						goods_gift_id:that.gift_id
					}
				}).then(res=>{
					this.$refs.getSuccess.open()
				}).catch(e=>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.get-success{
		width: 466upx;
		height: 602upx;
	}
	.shop-image-info-box{
		width: 100%;
		padding: 22upx;
		.image{
			width: 100%;
			height: 500upx;
			background: #EEEEEE;
		}
	}
	.store-info-box{
		width: 750upx;
		background-color: #FFFFFF;
		padding: 30upx 24upx;
		.store-tags-box{
			width: 100%;
			.item{
				padding: 2upx 18upx;
				margin-right: 16upx;
				margin-bottom: 16upx;
				background: #FBEEE5;
			}
		}
		.jianjie-box{
			line-height: 50upx;
			margin-bottom: 10upx;
		}
		.title-box{
			width: 100%;
			line-height: 40upx;
			margin-bottom: 12upx;
			.right{
				.icon{
					width: 20upx;
					height: 20upx;
					margin-left: 12upx;
				}
			}
			.left{
				.icon{
					width: 40upx;
					height: 40upx;
					margin-right: 16upx;
				}
			}
		}
	}
	.content{
		margin-top: 28upx;
		width: 750upx;
		background-color: #FFFFFF;
		min-height: 100vh;
	}
</style>
